<template>
  <div class="commentWrapper">
    <div class="dzList" v-if="moment.likeList.length > 0">
      <HeartOutlined :style="{fontSize: '15px'}"/>
      <div class="likeUser">{{ moment.likeList.join(' , ') }}</div>
    </div>
    <div class="commentList" v-if="moment.commentList?.length > 0">
      <template v-for="(comment, index) in moment.commentList" :key="comment.id">
        <div class="commentItem" v-if="comment.replyName == ''">
          <span class="name">{{ comment.publishName }}：</span>
          <span>{{ comment.content }}</span>
        </div>
        <div class="commentItem" v-else>
          <!--发布人-->
          <span class="name">{{ comment.publishName }}</span>
          <span class="hf">回复</span>
          <!--被回复人-->
          <span class="name">{{ comment.replyName }}：</span>
          <span>{{ comment.content }}</span>
        </div>
      </template>
    </div>
    <!--评论组件-->
    <div></div>
  </div>
</template>
<script lang="ts" setup>
import { inject } from 'vue'
import { HeartOutlined } from '@ant-design/icons-vue'
const moment = inject('moment', {})
console.log('@moment', moment)
</script>
<style lang="less" scoped>
.commentWrapper {
  background-color: #eaeaea;
  border-radius: 5px;
  margin-top: 10px;
  padding: 6px 10px;
  font-size: 14px;
  .dzList {
    display: flex;
    align-items: center;
    color: #5f71a5;
    font-size: 15px;
    gap: 10px;
    div {
      font-size: 14px;
    }
  }
  .commentList {
    .commentItem {
      margin-top: 7px;
      .name {
        color: #5f71b4;
      }
      .hf {
        color: #1d1d1d;
        margin: 0 2px;
      }
      span:last-child {
        color: #1d1d1d;
      }
    }
  }
}
</style>
